<template>
	<div class="bg">
		<showtitle showtitle="我的"></showtitle>
		<div class="dingbu">
			<div class="kefu" @click="$router.push('/aichat')">
				<img class="kefu-icon" :src="require(`@/assets/icons/kefulvse.png`)" alt="">
				<div style="font-size: 2vw;">帮助与客服</div>
			</div>
			<div class="shezhi">
				<img class="shezhi-icon" :src="require(`@/assets/icons/设置.png`)" alt="">
				<div style="font-size: 2vw;" @click="$router.push('/personinfo')">设置</div>
			</div>
		</div>
		<div class="information">
			<img @click="goUserInfoOrLogin" class="avatar" :src="user.head_img" alt="">
			<div @click="goUserInfoOrLogin" class="information-group">
				<div class="name-icon-container">
					<div class="name">{{user.name}}</div>
					<img class="jump-information" :src="require(`@/assets/icons/fanhui.png`)" alt="">

				</div>
				<div class="sf"  v-show="denglu">{{sf}}</div>
				<div class="zh"  v-show="denglu">UID：{{zh}}</div>
				<div class="zh"  v-show="denglu">积分：{{this.$store.getters.getUser.score}} 枚</div>
			</div>
			<div class="information-group-right" v-show="denglu">
				<div class="level" >L{{this.$store.getters.getUser.level}}</div>
				<div class="progress"></div>
			</div>
		</div>
		<div class="Dingdan">
			<div class="tools-all">
				<div class="always-tools">
					我的订单
				</div>
				<div class="all">
					<div @click="$router.push('/orders')">全部</div>
					<img :src="require(`@/assets/icons/尖括号.png`)" alt="" class="kefu-img2">
				</div>
			</div>

			<swiper class="dingdaning" ref="mySwiper">
				<swiper-slide>
					<div class="dingdan">
						<div class="dingdan-container" v-for="(item,index) in dingdan1"
							@click="$router.push(item.route)">
							<img class="dingdan-icon" :src="require(`@/assets/icons/${item.image}`)" alt="${item.name}">
							<div>{{item.name}}</div>
						</div>
					</div>
				</swiper-slide>
				<swiper-slide>
					<div class="dingdan2">
						<div class="dingdan2-container" v-for="(item,index) in dingdan2"
							@click="$router.push(item.route)">
							<img class="dingdan2-icon" :src="require(`@/assets/icons/${item.image}`)"
								alt="${item.name}">
							<div>{{item.name}}</div>
						</div>
					</div>
				</swiper-slide>
			</swiper>
		</div>

		

		<div class="bottom" v-show="denglu">
			<div class="address" @click="$router.push('/address')">
				<div class="address2" style="padding-top: 3vw;" >
					<img :src="require(`@/assets/icons/收获地址.png`)" alt="" class="address-img1">
					<div class="address-text">地址管理</div>
				</div>
				<img :src="require(`@/assets/icons/尖括号.png`)" alt="" class="address-img2">
			</div>


			
			
			<div class="address" @click="goShopSetting" v-if="this.$store.getters.getUser.position == 1">
				<div class="address2" >
					<img :src="require(`@/assets/icons/店铺.png`)" alt="" class="address-img1">
					<div class="address-text">企业店铺</div>
				</div>
				<img :src="require(`@/assets/icons/尖括号.png`)" alt="" class="address-img2">
			</div>
			
			<div class="kefu2" @click="$router.push('/message?uid=1')">
				<div class="kefu3">
					<img :src="require(`@/assets/icons/客服.png`)" alt="" class="kefu-img1">
					<div class="kefu-text">联系客服</div>
				</div>

				<img :src="require(`@/assets/icons/尖括号.png`)" alt="" class="kefu-img2">
			</div>
			<div class="address" @click="$router.push('/feedback')">
				<div class="address2">
					<img :src="require(`@/assets/icons/意见反馈.png`)" alt="" class="address-img1">
					<div class="address-text">意见反馈</div>
				</div>

				<img :src="require(`@/assets/icons/尖括号.png`)" alt="" class="address-img2">
			</div>
			
		</div>


		<button class="denglu-out" v-if="denglu" @click="logout">退出登录</button>
		<button class="denglu" v-else @click="login">登录</button>


		<copyright></copyright>
	</div>
</template>

<script>
	export default {
		name: "mine",
		data() {
			return {
				user: {},
				name: "用户1",
				zh: "18267036296",
				level: '4',
				sf: "企业",
				dingdan1: [{
					name: '历史订单',
					image: '历史订单.png',
					route: '/orders?current=0'
				}, {
					name: '待收货',
					image: '待收货.png',
					route: '/orders?current=1'
				}, {
					name: '待回收',
					image: '待回收.png',
					route: '/orders?current=2'
				}, {
					name: '待发货',
					image: '待发货.png',
					route: '/orders?current=3'
				}],
				dingdan2: [{
					name: '待评价',
					image: '待发货.png',
					route: '/orders?current=4'
				}, {
					name: '回收去向',
					image: '待发货.png',
					route: '/orders?current=5'
				}],
				
				denglu: false,
				sfshow: false
			}
		},
		mounted() {
			this.init();
			if (this.user.name == "未登录") {
				this.denglu = false
			} else {
				this.denglu = true
			};
			// 判断身份
			if (this.$store.getters.getUser.position == 0) {
				this.sfshow = true;
			} else {
				this.sfshow = false;
			}
			//判断是否登录
			console.log(this.$store.getters)
		},
		computed: {

		},
		beforeDestroy() {
			// 在组件销毁前卸载Swiper  
			this.$refs.mySwiper.swiperInstance.destroy(true,
				true); // 第二个参数为true会重置swiper到初始状态，第三个参数为true会移除swiper内部的dom元素  
		},
		methods: {
			init() {
				this.user = this.$store.getters.getUser;
				if (this.user.position == 0) {
					this.sf = "农户";
				} else {
					this.sf = "企业";
				}
				this.zh = this.user.uid;
			},
			login() {
				this.$router.push('/login');
			},
			logout() {
				// Logic for logout
				this.denglu = false; // Set denglu to false to display the login button
				this.removeStorage('token');
				location.reload();
			},
			goUserInfoOrLogin() {
				if (this.user.name == '未登录') {
					this.$router.push('/login')
				} else {
					this.$router.push('/personinfo')
				}
			},
			goShopSetting(){
				this.$router.push('/shopsetting?shopid='+this.$store.getters.getUser.uid)
			},
		}
	}
</script>

<style scoped>
	.dingbu {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		padding-right: 5vw;
		margin-top: 5vw;
	}

	.kefu {
		text-align: center;
		margin-right: 5vw;
		/* 根据需要添加右边距 */
	}

	.kefu-icon {
		width: 5vw;
		vertical-align: middle;
		/* 确保图标和文字垂直对齐 */
	}

	.shezhi {
		text-align: center;
	}

	.shezhi-icon {
		width: 5vw;
		vertical-align: middle;
		/* 确保图标和文字垂直对齐 */
	}

	.information {
		display: flex;
		align-items: center;
		margin-top: -12vw;
	}

	.avatar {
		display: block;
		width: 15vw;
		height: 15vw;
		flex-shrink: 0;
		margin: 15vw 5vw;
	}

	.information-group {
		display: flex;
		flex-direction: column;
		margin-left: 1vw;
		/* Adjust as needed */
	}

	.name-icon-container {
		display: flex;
		align-items: center;

	}

	.name {
		font-size: 6vw;
		font-weight: bold;
		margin-right: 2vw;
		/* Add some space between name and icon */
	}

	.sf {
		margin-top: 1vw;
		color: #ff8002;
	}

	.zh {
		margin-top: 1vw;
	}

	.jump-information {
		width: 4vw;
		transform: scale(-1);
		/* No margin-top or margin-bottom to keep it close to the name */
	}



	.information-group-right {
		margin-left: 22vw;
		margin-top: 2vw;
		text-align: center;

	}

	.level {
		font-size: 5vw;
		font-weight: bold;
		color: #ff8002;
		animation: heartbeat 1s infinite;
	}

	.progress {
		width: 16vw;
		height: 2vw;
		background: linear-gradient(to right, #ffcf0e, #ff8002);
		border-radius: 2vw;
		margin-top: 4vw;
	}

	.horizontal-nav {
		background-color: #f5f5f5;
		padding: 1vw 2vw;
	}

	.horizontal-nav ul {
		display: flex;
		justify-content: space-around;
		align-items: center;
		list-style-type: none;
	}

	.horizontal-nav li a {
		text-decoration: none;
		color: #333;
		font-weight: bold;
	}

	.horizontal-nav li a:hover {
		color: #007bff;
	}

	.Dingdan {
		background-color: white;
		border: 1px solid #333;
		height: 25vw;
		padding-top: 3vw;
		border: none;
		border-radius: 4vw;
		margin-left: 2vw;

	}

	.tools-all {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.all {
		margin-right: 1vw;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.always-tools {
		margin-top: -2vw;
		margin-left: 2vw;
		font-size: 5vw;
		margin-bottom: 2vw;
	}

	.Tools {
		background-color: white;
		border: 1px solid #333;
		height: 25vw;
		padding-top: 3vw;
		border: none;
		border-radius: 4vw;
		margin-top: 4vw;
		margin-left: 2vw;
		margin-right: 2vw;
	}

	.look-dd {
		width: 96vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 1vw 0vw 1vw 0vw;
		margin-bottom: 2vw;
	}

	.icon-container {
		display: flex;
		/* 每个容器内也使用flex布局，使图标和文字垂直居中 */
		flex-direction: column;
		/* 垂直排列图标和文字 */
		align-items: center;
		/* 垂直居中 */
		text-align: center;
		/* 文字水平居中 */
		width: 20vw;
		padding: 2vw;
	}

	.dingdan-icon {
		width: 6vw;
		/* 设置图标宽度，根据需要调整 */
		height: 6vw;
		/* 设置图标高度，根据需要调整 */
		margin-bottom: 1vw;
		/* 图标和文字之间的间距 */
	}

	.dingdaning {
		margin-bottom: 2vw;
	}

	.dingdan {
		width: 96vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;
		padding: 1vw 0vw 1vw 0vw;
		margin-bottom: 2vw;
		flex-wrap: nowrap;
	}

	.dingdan-container {
		display: flex;
		/* 每个容器内也使用flex布局，使图标和文字垂直居中 */
		flex-direction: column;
		/* 垂直排列图标和文字 */
		align-items: center;
		/* 垂直居中 */
		text-align: center;
		/* 文字水平居中 */
		width: 20vw;
		padding: 2vw;
	}

	.dingdan1-icon {
		width: 6vw;
		/* 设置图标宽度，根据需要调整 */
		height: 6vw;
		/* 设置图标高度，根据需要调整 */
		margin-bottom: 1vw;
		/* 图标和文字之间的间距 */
	}


	.dingdan2 {
		width: 100vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: nowrap;
	}

	.dingdan2-container {
		display: flex;
		/* 每个容器内也使用flex布局，使图标和文字垂直居中 */
		flex-direction: column;
		/* 垂直排列图标和文字 */
		align-items: center;
		/* 垂直居中 */
		text-align: center;
		/* 文字水平居中 */
		width: 20vw;
		padding: 2vw;
	}

	.dingdan2-icon {
		width: 6vw;
		/* 设置图标宽度，根据需要调整 */
		height: 6vw;
		/* 设置图标高度，根据需要调整 */
		margin-bottom: 1vw;
		/* 图标和文字之间的间距 */
	}


	.bottom {
		margin-top: 4vw;
		margin-left: 2vw;
		background-color: white;
		border-radius: 4vw;
		margin-right: 2vw;
	}

	.address {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4vw;
		border-bottom: 1px solid gainsboro;
	}
	.address1{
		padding-top: 4vw;
	}
	.address2 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 2vw;

		margin-left: 4vw;

	}

	.address-img1 {
		width: 5vw;


	}

	.address-text {
		margin-left: 3vw;
		font-size: 4vw;
	}

	.address-img2 {
		width: 5vw;
		margin-right: 2vw;
	}

	.kefu2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4vw;
		border-bottom: 1px solid gainsboro;

	}

	.kefu3 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 2vw;
		margin-left: 4vw;
	}

	.kefu-img1 {
		width: 5vw;


	}

	.kefu-text {
		margin-left: 3vw;
		font-size: 4vw;
	}

	.kefu-img2 {
		width: 5vw;
		margin-right: 2vw;
	}

	.denglu {
		width: 50%;
		height: 10vw;
		border-radius: 4vw;
		border: none;
		background: linear-gradient(to right, #ffcf0e, #ff8002);
		color: white;
		font-size: 5vw;
		display: block;
		margin: 10vw auto !important;
	}

	.denglu-out {
		width: 50vw;
		height: 10vw;
		border-radius: 4vw;
		border: none;
		background: linear-gradient(to right, #ffcf0e, #ff8002);
		color: white;
		font-size: 5vw;
		display: block;
		margin: 0 auto !important;
	}



	.dingdaning {
		height: auto;
	}
</style>